<template>
  <div class="container">
    <div class="portlet work-order">
      <div class="portlet-body">
        <div class="form-submit search-line">
          <el-form ref="form" :model="searchParams" label-width="80px">
            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item label="订单号">
                   <el-input v-model="searchParams.orderNO" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="客户编码">
                  <el-input v-model="searchParams.customerCode" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="订单类型">
                  <el-select v-model="searchParams.orderType" clearable placeholder="请选择">
                    <el-option
                      v-for="item in orderTypes"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
             <el-col :span="6">
                <el-form-item label="备注">
                  <el-input v-model="searchParams.remark" />
                </el-form-item>
              </el-col>
              <!-- <el-col :span="6">
                <el-form-item label="场地">
                  <el-autocomplete
                    popper-class="my-autocomplete"
                    v-model="searchParams.fieldName"
                    :fetch-suggestions="querySearchSiteAsync"
                    placeholder="场地名称"
                    clearable
                  >
                    <template slot-scope="{ item }">
                      <div class="name">{{ item.value }}</div>
                      <span class="addr">{{ item.address }}</span>
                    </template>
                  </el-autocomplete>
                </el-form-item>
              </el-col> -->
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="预约时间">
                  <el-col :span="11" style="padding:0px">
                    <el-date-picker
                      type="datetime"
                      placeholder="预约开始时间"
                      value-format="yyyy-MM-ddTHH:mm:ss"
                      v-model="searchParams.start_AppointmentTime"
                    ></el-date-picker>
                  </el-col>
                  <el-col class="line" :span="2">——</el-col>
                  <el-col :span="11" style="padding:0px">
                    <el-date-picker
                      type="datetime"
                      placeholder="预约结束时间"
                      value-format="yyyy-MM-ddTHH:mm:ss"
                      v-model="searchParams.end_AppointmentTime"
                    ></el-date-picker>
                  </el-col>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="下单时间">
                  <el-col :span="11" style="padding:0px">
                    <el-date-picker
                      type="datetime"
                      placeholder="下单开始时间"
                      value-format="yyyy-MM-ddTHH:mm:ss"
                      v-model="searchParams.start_CreateTime"
                    ></el-date-picker>
                  </el-col>
                  <el-col class="line" :span="2">——</el-col>
                  <el-col :span="11" style="padding:0px">
                    <el-date-picker
                      type="datetime"
                      placeholder="下单结束时间"
                      value-format="yyyy-MM-ddTHH:mm:ss"
                      v-model="searchParams.end_CreateTime"
                    ></el-date-picker>
                  </el-col>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item label="订单状态">
                  <el-select v-model="searchParams.workOrderStatusId" clearable placeholder="请选择">
                    <el-option
                      v-for="item in orderStatues"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="订单地址">
                  <el-input v-model="searchParams.address" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="省市区">
                  <district-picker
                    :province="searchParams.province"
                    :city="searchParams.city"
                    :area="searchParams.area"
                    @selected="onSelectedPCD"
                  ></district-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-button
                  class="filter-item"
                  size="medium"
                  type="primary"
                  icon="el-icon-download"
                  @click="download"
                >下载</el-button>
              </el-col>
              <el-col :span="12" class="text-aligh-right">
                <el-button
                  class="filter-item"
                  size="medium"
                  type="primary"
                  @click="resetOrder"
                >重置</el-button>
                <el-button
                  class="filter-item"
                  size="medium"
                  type="primary"
                  icon="el-icon-search"
                  :loading="searchLoading"
                  @click="searchOrders"
                >查询</el-button>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="workOrder-table">
          <ul class="nav-tabs">
            <li :class="{'active':activeName==='All'}" @click="onClickStatuTab('All',-2)">
              <a>全部 ({{orderStateInfo.allStateTotal || 0}})</a>
            </li>
            <li
              :class="{'active':activeName==='Submitted'}"
              @click="onClickStatuTab('Submitted',1)"
            >
              <a>已下单 ({{orderStateInfo.submitted || 1}})</a>
            </li>
            <li
              :class="{'active':activeName==='Paid'}"
              @click="onClickStatuTab('Paid',2)"
            >
              <a>已支付 ({{orderStateInfo.paid || 2}})</a>
            </li>
            <li :class="{'active':activeName==='ReceiveConfirmed'}" @click="onClickStatuTab('ReceiveConfirmed',3)">
              <a>已接收 ({{orderStateInfo.receiveConfirmed || 3}})</a>
            </li>
             <li
              :class="{'active':activeName==='Delivery'}"
              @click="onClickStatuTab('Delivery',4)"
            >
              <a>配送中 ({{orderStateInfo.delivery || 4}})</a>
            </li>
             <li
              :class="{'active':activeName==='Completed'}"
              @click="onClickStatuTab('Completed',5)"
            >
              <a>已完成 ({{orderStateInfo.completed || 5}})</a>
            </li>
             <li
              :class="{'active':activeName==='Cancelled'}"
              @click="onClickStatuTab('Cancelled',6)"
            >
              <a>已取消 ({{orderStateInfo.cancelled || 6}})</a>
            </li>
          </ul>
          <div class="nav-contain">
            <el-table
              v-loading="tableLoading"
              :data="tableData"
              :show-header="true"
              @selection-change="selectionCheckBoxChange"
              border
              fit
              highlight-current-row
              style="width: 100%;"
            >
              <el-table-column type="selection" fixed align="center"></el-table-column>
              <el-table-column label="订单号" prop="orderNO" align="center">
                <template slot-scope="{row}">{{ row.orderNO}}</template>
              </el-table-column>
              <el-table-column label="订单类别" prop="orderType" align="center">
                <template slot-scope="{row}">{{ row.orderType }}</template>
              </el-table-column>
              <el-table-column label="预约时间" prop="appointmentTime" align="center">
                <template
                  slot-scope="{row}"
                >{{ row.appointmentTime | parseTime('{y}-{m}-{d} {h}:{i}') }}</template>
              </el-table-column>
              <el-table-column label="客户编号" prop="customerCode" align="center">
                <template slot-scope="{row}">
                  <span class="link-type" @click="customerDetail(row)">{{ row.customerCode }}</span>
                </template>
              </el-table-column>
              <el-table-column label="订单创建时间" prop="createTime" align="center">
                <template
                  slot-scope="{row}"
                >{{ row.createTime | parseTime('{y}-{m}-{d} {h}:{i}') }}</template>
              </el-table-column>
              <el-table-column label="备注" prop="remark" align="center">
                <template slot-scope="{row}">{{ row.remark}}</template>
              </el-table-column>
              <!-- <el-table-column label="订单明细" prop="deviceName" align="center">
                <template slot-scope="{row}">
                  <span class="link-type" @click="workOrderDetail(row)">{{ row.deviceName }}</span>
                </template>
              </el-table-column> -->
              <el-table-column label="订单状态" prop="state" align="center">
                <template slot-scope="{row}">
                  <el-tag v-if="row.orderStatusId === 1" size="small">已下单</el-tag>
                  <el-tag v-if="row.orderStatusId === 2" size="small" type="warning">已支付</el-tag>
                  <el-tag v-if="row.orderStatusId === 3" size="small">订单已接收</el-tag>
                  <el-tag v-if="row.orderStatusId === 4" size="small">配送中</el-tag>
                  <el-tag v-if="row.orderStatusId === 5" type='info' size="small">已完成</el-tag>
                  <el-tag v-if="row.orderStatusId === 6" type="danger" size="small">已取消</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="操作" fixed="right" align="center" width="230">
                <template slot-scope="scope">
                  <el-button size="mini" @click="orderDetail(scope.row)">查看</el-button>
                  <el-button
                    type="primary"
                    v-if="scope.row.workOrderStatusId ==1 && scope.row.checkEmployeeName"
                    size="mini"
                    @click="editOrderShow(scope.row)"
                  >编辑</el-button>
                  <el-button
                    type="danger"
                    v-if="!scope.row.checkEmployeeName"
                    size="mini"
                    @click="cancelOrderShow(scope.row)"
                  >取消</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="pagers">
              <pagination
                v-show="searchParams.totalCount>0"
                :total="searchParams.totalCount"
                :page.sync="searchParams.pageIndex"
                :limit.sync="searchParams.pageSize"
                @pagination="pageChange"
              />
            </div>
          </div>
        </div>

        <div class="dialog-form">
          <el-dialog title="取消工单" :visible.sync="auditFormVisible" width="30%">
            <el-form :model="audit" ref="audit">
              <el-form-item
                label="原因"
                prop="extend"
                :rules="[{ required: true, message: '请输入取消理由', trigger: 'blur' }]"
              >
                <el-input v-model="audit.extend" placeholder="请输入取消理由"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="cancelAudit">取 消</el-button>
              <el-button type="primary" @click="auditSubmit" :loading="auditLoading">确 定</el-button>
            </div>
          </el-dialog>
        </div>
      </div>
    </div>
  </div>
</template>

<script src="./order-list.js">
</script>
<style lang="scss" scoped>
@import "./order-list.scss";
</style>

